<template>
  <div v-loading="loading" element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="房间名称" prop="ROOMNAME">
              <el-input v-model="form.ROOMNAME" placeholder="请输入房间名称"></el-input>
            </el-form-item>
          </el-col>

          <el-col :lg="4" :md="6">
            <el-form-item label="房间号" prop="ROOMNO">
              <el-input v-model="form.ROOMNO" placeholder="请输入房间号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="工位数" prop="SEATNO">
              <el-input v-model="form.SEATNO" placeholder="请输入工位数"></el-input>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :lg="6" :md="6" class="searchBtnMarginTop">
            <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="query">查询</el-button>
          
            <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('form')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col :lg="12" :md="24" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini" @click="addRoomInfo" icon="el-icon-plus">新增</el-button>
        <!-- </el-col>
        <el-col :lg='3' :md='4' v-if="btnPermission('Button_DevInfo_Edit')"> -->
          <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
            @click='UpdateRoomInfo'>修改房间</el-button>
        <!-- </el-col>
        <el-col :lg='3' :md='4' v-if="btnPermission('Button_DevInfo_Edit')"> -->
          <el-button type='primary' size='mini' icon='el-icon-edit' class='b-button' :disabled="currentRow.length!=1"
            @click='DialogShow'>维护工位</el-button>
        <!-- </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')"> -->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="del" :disabled="currentRow.length!=1">删除
          </el-button>
        </el-col>

      </el-row>
      <el-table :data="tableData" ref="table" border class="tableMarginTop" highlight-current-row
        @selection-change="handleCurrentChange" header-row-class-name="tableHeaderClass" style="min-height:390px;">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column prop="CENTERNO" label="坐席中心" width="120" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="ROOMNO" label="房间号" width="120"></el-table-column>
        <el-table-column prop="ROOMNAME" label="房间名称" ></el-table-column>
        <el-table-column prop="SEATNO" label="最大工位数" ></el-table-column>
        <el-table-column prop="IMAGENAME" label="底图名称" width="100px"></el-table-column>
        <el-table-column prop="URL" label="底图路径" width="200px"></el-table-column>
        <el-table-column prop="URL" label="底图预览" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini"  @click="dialogDetail(scope.row)">预览</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="IMAGENO" label="关联状态图片" width="120px"></el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <!-- <el-button @click="readrealTimeMonitor(scope.row)" type="text" size="small">查看实时监控</el-button> -->
            <el-button @click="readrealTimeSeatStatus(scope.row)" type="text" size="small">查看实时监控</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
        <el-pagination :current-page="currentPage" background @size-change="handleSizeChange"
          :page-sizes="[10,25,50,100]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
          :total="totalRcrdNum" @current-change="changePage"></el-pagination>
      </div>
    </el-card>
    <!-- 图片弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :lock-scroll=false @close="dialogDetailClose">
      <div v-loading="loadingImg" style="text-align:center;">
        <h4 v-if="loadingImgError">加载图片失败</h4>
        <img style="width:100%;min-height:340px;position:relative;" :src="dialogImageUrl" alt="" @load="loadingImg=false"
          @error="loadingImgFalse">
      </div>
    </el-dialog>
    <!-- 弹窗 -->
    <keep-alive>
      <!-- <component :is="dialogList.addaddlocalCardDialog" :option="dialogOptions" @refreshTable="query"></component> -->
    </keep-alive>
    <!-- <component :is="dialogList.seatDialog" :option="seatOptions" @refreshTable="query"></component> -->
    <component :is="dialogList.addRoomDialog" :option="addRoomOptions" @refreshTable="query"></component>
  </div>
</template>

<script>
 // 查询房间工位状态信息
  import seatManage from "@/message/siteManagement/workplacemonitoring/seatManage";
  import toolBox from "@/common/utils/toolBox";
  // import addaddlocalCardDialog from "./dialog/addDialog";
  // import seatDialog from "./dialog/seatManage";
  import addRoomDialog from "./dialog/addRoom";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import requestYg from "@/common/utils/requestYg";
  import queryRoomInfo from "@/message/siteManagement/workplacemonitoring/roomManage";
  import queryRoomSeatStatus from "@/message/siteManagement/workplacemonitoring/queryRoomSeatStatus";
  // import addRoomInfo from "@/message/siteManagement/workplacemonitoring/addRoomInfo";
  import delRoomInfo from "@/message/siteManagement/workplacemonitoring/delRoomInfo";
  import iconManage from "@/message/siteManagement/iconManage/iconQuery";

  export default {
    name: "",
    data() {
      return {
        dialogVisible: false,
        dialogImageUrl: '',
        loadingImg: false,
        loadingImgError: false,
        "flag": {
          "0": "坐席",
          "1": "非坐席",

        },

        "FLAG": {
          "1": "是",
          "0": "否"
        },
        flagList: [{
            name: "坐席",
            value: "0"
          },
          {
            name: "非坐席",
            value: "1"
          },

        ],
        pageSize: undefined, //表格每页的条数
        form: {
          ROOMNAME: "", //房间名称
          ROOMNO: "", //房间号
          SEATNO: "", //工位数

        },
        currentRow: [], //表格当前选中行
        currentPage: 1, //表格当前页
        totalRcrdNum: 0,
        tableData: [], //表格 数据
        loading: false, //loading遮罩
        total: 0, //表格总条数
        checkedUser: false, //控制按钮是否可用
        isDisabledDel: false,
        dialogList: {
          //指定被渲染组件列表
          // addaddlocalCardDialog,
          // seatDialog,
          addRoomDialog
        },
        // seatOptions: {
        //   isShow: false
        // },
        addRoomOptions: {
          isShow: false
        },
        // dialogOptions: {
        //   //新增
        //   isShow: false,
        // },
      };
    },
    computed: {},

    created: function () {
      this.pageSize = getGlobalParams.get("PageSize");
      this.query();
    },
    watch: {},
    methods: {
      // 查询状态图标
       async queryIcon(IMAGENO) {
        let data = []
        let data1 = []
        let resBody = new iconManage();
        resBody.data.IMAGENO = IMAGENO;
        resBody.data.PAGEFLAG = 4;
        resBody.data.PAGEROWNUM = 100;
        resBody.data.CURRPAGE = 1;
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              data = response.RSP_BODY.struct || []
              data.forEach(item => {
                item.IMAGEINFO.forEach(element =>{
                  data1.push({
                    ID:element.ID,
                    IMAGENO: item.IMAGENO,
                    IMAGEDESC: element.IMAGEDESC,
                    IMAGENAME: element.IMAGENAME,
                    REMARK1: element.REMARK1,
                    REMARK2: element.REMARK2,
                    TYPE: element.TYPE,
                    URL: element.URL,
                  })
                })
              })
              return data1
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });
      },
      loadingImgFalse() {
        this.loadingImg = false;
        this.loadingImgError = true;
      },
      //预览功能
      dialogDetail(row) {
        this.loadingImgError = false;
        this.dialogVisible = true;
        this.loadingImg = true;
        //这里的地址在globalParams中配置  需要和后台的存放文件的配置统一
        //在这里只取图片下行地址中的ip地址
        var IpAddress =
          getGlobalParams.get("ImageDownloadAddress");
        //在表格中返回的内容只有相对地址，所以需要使用ip地址拼接
        this.dialogImageUrl = IpAddress + row.URL;
      },
      // 关闭图片预览弹框
      dialogDetailClose() {
        this.dialogImageUrl = "";
      },
      //查询
      async query() {
        let resBody = new queryRoomInfo();
        resBody.data.OPERFLAG = 'S' //房间号
        resBody.data.ROOMNO = this.form.ROOMNO; //房间号
        resBody.data.ROOMNAME = this.form.ROOMNAME; //房间名称
        resBody.data.SEATNO = this.form.SEATNO; //工位数
        resBody.data.pageflag = 4; //分页标识(1-最后一页,2-上一页,3-下一页,4-当前页)
        resBody.data.pagerownum = this.pageSize; //表格每页的条数
        resBody.data.currpage = this.currentPage; //当前页
        // console.log("房间信息查询query的resBody.data",resBody.data);
        requestYg(resBody)
          .then(response => {
            // console.log("房间信息查询的response，", response);
            // 总条数
             this.totalRcrdNum = response.RSP_BODY.TOTALROWNUM
            // ? response.RSP_BODY.TOTALROWNUM
            // : 0;
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.tableData = response.RSP_BODY.struct || [];
            } else {
              this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
              });
              this.tableData = [];
            }
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
          });

      },
      // 删除弹出
      del() {
        this.$confirm("该条房间信息被删除, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.paramDel();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });

      },
      paramDel() { //删除房间信息
        this.loading = true;
        let resBody = new queryRoomInfo();
        resBody.data.OPERFLAG = "D";
        resBody.data.ROOMNO = this.currentRow[0].ROOMNO;
        resBody.data.CENTERNAME = this.currentRow[0].CENTERNAME;
        resBody.data.CENTERNO = this.currentRow[0].CENTERNO;
        console.log('resBody==' +JSON.stringify(resBody))
        requestYg(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.loading = false;
              this.$message({
                type: "success",
                message: "房间信息删除成功!"
              });
              this.query();
            } else {
              this.loading = false;
              this.$message({
                type: "waring",
                message: "房间信息删除失败! 原因： " + response.SYS_HEAD.ReturnMessage
              });
            }
          })
          .catch(error => {
            this.loading = false;
          });
      },
      // 添加
      addRoomInfo() {
        // //添加
        //   this.$router.push({
        //                   path: "/AddRoom",
        //                   // params: {
        //                     // firstLog: this.$store.getters.isFirstLoginFLag,
        //                     // firstLogMessage: data.SYS_HEAD.ReturnMessage

        //                   // }
        //                 });
        this.addRoomOptions.isShow = true
        this.addRoomOptions.title = '新增房间信息'
        this.addRoomOptions.log = "1"; //新增
      },
      dataFormat(row, column) {
        if (column.property == "CENTERNO")
          return row["CENTERNAME"]+ '-' +row[column.property];
      },
      // 维护工位
      async DialogShow() {
        let option=[]
        // this.seatOptions.isShow = true;
        // this.seatOptions.isChecked = true;
        // this.seatOptions.currentRow = this.currentRow[0];
        // // console.log('1111111',this.currentRow[0])
        // this.seatOptions.title = "工位信息维护";
        // this.seatOptions.log = "2"; //修改
        let resBody = new seatManage();
        resBody.data.ROOMNO = this.currentRow[0].ROOMNO
        resBody.data.OPERFLAG = 'S'
        resBody.data.CURRPAGE = 1
        resBody.data.PAGEROWNUM = 200;
        resBody.data.PAGEFLAG = 4;
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          option = response.RSP_BODY.struct
          console.log('111',option)
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
         this.$router.push({
                          //  path: "/UpdateRoom",
                          name: 'UpdateRoom',
                          params: {
                            stationList:option,
                            bkImageUrl: getGlobalParams.get("ImageDownloadAddress")  +this.currentRow[0].URL,
                            roomNo:this.currentRow[0].ROOMNO,
                            stationSize:this.currentRow[0].SEATNO,
                            roomName:this.currentRow[0].ROOMNAME,
                          }
                        });
      },
      // 对话框展示
      UpdateRoomInfo(row) {
        // console.log("UpdateRoomInfo", this.currentRow[0].ROOMNO);
        this.addRoomOptions.isShow = true;
        this.addRoomOptions.currentRow = this.currentRow[0];
        // console.log('1111111',this.currentRow[0])
        this.addRoomOptions.title = "修改房间信息";
        this.addRoomOptions.log = "2"; //修改

        // let resBody=new queryRoomSeatStatus();
        // resBody.data.ROOMNO= this.currentRow[0].ROOMNO;
        // console.log("房间工位状态的查询query的resBody.data",resBody.data);
        //   requestYg(resBody)
        //   .then(response => {
        //     console.log("房间工位状态查询的response，",response);
        //     if (response.SYS_HEAD.ReturnCode === "000000"&&response.RSP_BODY.Result ) {
        //       this.tableData = response.RSP_BODY.Result || [];    
        //       console.log("tableData,",this.tableData );    

        //     this.$router.push({
        //                   //  path: "/UpdateRoom",
        //                   name: 'UpdateRoom',
        //                   params: {
        //                     stationList:this.tableData,
        //                     bkImageUrl:this.currentRow[0].URL,
        //                     roomNo:this.currentRow[0].ROOMNO,
        //                     stationSize:this.currentRow[0].SEATNO,
        //                     roomName:this.currentRow[0].ROOMNAME,
        //                   }
        //                 });

        //     } else {
        //       this.$message({
        //         type: "error",
        //         message: response.SYS_HEAD.ReturnMessage
        //       });
        //       this.tableData=[];
        //     }
        //     this.loading = false;
        //   })
        //   .catch(error => {
        //     this.loading = false;
        //   });
      },
      // 重置查询条件
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      changePage(val) {
        this.currentPage = val;
        this.query();
      },
      refreshTable() {
        //刷新数据并清除选中的数据
        // this.businesstypeList();
      },

      handleCurrentChange(val) {
        //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
        this.currentRow = val;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.query();
      },

      //    stationList: [
      //   { initIconUrl: 'static/images/icons/icon/man-in.png',
      //     initStatusName: '未登录',
      //     initStatusNo: '23',
      //     left: 336,
      //     stationNo: 'A001',
      //     top: 220 },
      //   { initIconUrl: 'static/images/icons/icon/man-in.png',
      //     initStatusName: '未登录',
      //     initStatusNo: '23',
      //     left: 336,
      //     stationNo: 'A002',
      //     top: 290 },
      //   { initIconUrl: 'static/images/icons/icon/man-in.png',
      //     initStatusName: '未登录',
      //     initStatusNo: '23',
      //     left: 336,
      //     stationNo: 'A003',
      //     top: 415 }

      // ]



      async readrealTimeSeatStatus(row) {
        console.log("当前房间的工位状态，", row);
         let option=[]
        // this.seatOptions.isShow = true;
        // this.seatOptions.isChecked = true;
        // this.seatOptions.currentRow = this.currentRow[0];
        // // console.log('1111111',this.currentRow[0])
        // this.seatOptions.title = "工位信息维护";
        // this.seatOptions.log = "2"; //修改
        let resBody = new seatManage();
        resBody.data.ROOMNO = row.ROOMNO
        resBody.data.OPERFLAG = 'S'
        resBody.data.CURRPAGE = 1
        resBody.data.PAGEROWNUM = 200;
        resBody.data.PAGEFLAG = 4;
        let response = await requestYg(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          option = response.RSP_BODY.struct
          this.$router.push({
                name: 'realTimeMonitor',
                params: {
                  stationList: option,
                  bkImageUrl: getGlobalParams.get("ImageDownloadAddress") +row.URL,
                  roomNo: row.ROOMNO,
                  stationSize: row.SEATNO,
                  roomName: row.ROOMNAME,
                  imageNo: row.IMAGENO,
                }
              });
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
        // let resBody = new queryRoomSeatStatus();
        // resBody.data.ROOMNO = row.ROOMNO;
        // console.log("房间工位状态的查询query的resBody.data", resBody.data);
        // requestYg(resBody)
        //   .then(response => {
        //     console.log("房间工位状态查询的response，", response);
        //     if (response.SYS_HEAD.ReturnCode === "000000" && response.RSP_BODY.Result) {
        //       this.tableData = response.RSP_BODY.Result || [];
        //       console.log(this.tableData);
        //       // console.log(row.ROOMNO);
        //       this.$router.push({

        //         name: 'realTimeMonitor',
        //         params: {
        //           stationList: this.tableData,
        //           bkImageUrl: row.URL,
        //           roomNo: row.ROOMNO,
        //           stationSize: row.SEATNO,
        //           roomName: row.ROOMNAME,
        //         }
        //       });

        //     } else {
        //       this.$message({
        //         type: "error",
        //         message: response.SYS_HEAD.ReturnMessage
        //       });
        //       this.tableData = [];
        //     }
        //     this.loading = false;
        //   })
        //   .catch(error => {
        //     this.loading = false;
        //   });
      },
    }
  };

</script>


<style lang="scss" scoped>
  .selectTree {
    min-width: 150px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .dialog-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: red;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .el-card {
    width: 100%;
  }

  .el-form-item {
    margin-left: 30px;
  }

  .el-form-item1 {
    margin-left: 10px;
  }

  .box2-button {
    width: 80px;
  }

  .el-card {
    overflow: inherit;
  }

</style>
